<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script src="./Promise.js"></script>
<script>

Promise.resolve()// p1
.then(()=>{// f1
    console.log(0);
    return Promise.resolve(4);// 返回Promise对象成功的回调f2
})// p2
.then((res)=>{// f4
    console.log( res );// 4
});

Promise.resolve()// p3
.then(()=>{// f5
    console.log( 1 );
})// p4
.then(()=>{// f6
    console.log( 2 );
})// p5
.then(()=>{// f7
    console.log( 3 );
})// p6
.then(()=>{// f8
    console.log( 5 );
});

// 原生的Promise运行结果：0 1 2 3 4 5
// 自己的Promise运行结果：0 1 2 4 3 5

// 微任务队列：[f1,f5,f3,f6,f2,f7,f4,f8]
// 执行栈：
// Promise.resolve() -> 返回成功状态的p1
// .then() -> f1加入微队列
// Promise.resolve() -> 返回成功状态的p3
// .then() -> f5加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f1()
    // console.log(0);
    // return Promise.resolve(4); 返回一个成功状态的Promise对象
    // Promise.resolve(4).then()也是异步执行 -> 异步回调函数，f3加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f5()
    // console.log( 1 );
    // return undefined; -> f6加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f3()
    // f3执行后，返回的Promise对象为成功状态，f2加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f6()
    // console.log( 2 );
    // return undefined; -> f7加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f2()
    // f2执行后，p2为成功状态，f4加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f7()
    // console.log( 3 );
    // return undefined; -> f8加入微队列
// 此时，js引擎线程空闲了，处理事件队列
// f4()
    // console.log( res );// 4
    // return undefined; 
// 此时，js引擎线程空闲了，处理事件队列
// f8()
    // console.log( 5 );
    // return undefined; 


</script>
</body>
</html>